// pages/country/index.js
const app = getApp()
var api = require("../../utils/api.js")
import * as echarts from '../../com/ec-canvas/echarts';
var param = "7,7.1";
var param2 = "7,7.1";

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var list = param.split(",");
  var data = [];
  for (var i in list) {
    let obj = [0.5, list[i]]
    data.push(obj)
  }

  var option = {
    width: '100%',
    xAxis: [{
      show: false
    }],
    grid: {
      top: '15%',
      bottom: '5%',
      containLabel: true
    },
    yAxis: {
      name: 'PH'
    },
    color: ['#FF3F00', '#EFF7FA', '#FAE9E1'],
    series: [{
      symbolSize: 12,
      data: data,
      color: '#FF3F00',
      type: 'scatter'
    }, {
      name: '上限',
      xAxisIndex: 0,
      yAxisIndex: 0,
      type: 'line',
      color: '#FF3F00',
      lineStyle: {
        type: 'dashed',
        width: 1,
        symbol: 'none'
      },
      data: [
        [0, 9.5],
        [1, 9.5]
      ]
    }, {
      name: '下限',
      xAxisIndex: 0,
      yAxisIndex: 0,
      type: 'line',
      color: '#FC90AE',
      lineStyle: {
        type: 'dashed',
        width: 1,
        symbol: 'none'
      },
      data: [
        [0, 6.5],
        [1, 6.5]
      ]
    }]
  };
  chart.setOption(option);
  return chart;
}

function initChart2(canvas, width, height) {
  const chart2 = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart2);

  var list2 = param2.split(",");
  var data2 = [];
  for (var i in list2) {
    let obj2 = [0.5, list2[i]]
    data2.push(obj2)
  }

  var option2 = {
    width: '100%',
    xAxis: [{
      show: false
    }],
    grid: {
      top: '15%',
      bottom: '5%',
      containLabel: true
    },
    yAxis: {
      name: 'TDS mg/L'
    },
    color: ['#FF3F00', '#EFF7FA', '#FAE9E1'],
    series: [{
      symbolSize: 12,
      data: data2,
      color: '#8EACC8',
      type: 'scatter'
    }, {
      name: '上限',
      xAxisIndex: 0,
      yAxisIndex: 0,
      type: 'line',
      color: '#FC90AE',
      lineStyle: {
        type: 'dashed',
        width: 1,
        symbol: 'none'
      },
      data: [
        [0, 1500],
        [1, 1500]
      ]
    }, {
      name: '高等故障率',
      type: 'line',
      animation: false,
      areaStyle: {
        normal: {}
      },
      lineStyle: {
        normal: {
          width: 1
        }
      },
      markArea: {
        data: [
          [{
            yAxis: '1000'
          }, {
            yAxis: '1500'
          }]
        ]
      }
    }, {
      name: '中等故障率',
      type: 'line',
      animation: false,
      areaStyle: {
        normal: {}
      },
      lineStyle: {
        normal: {
          width: 1
        }
      },
      markArea: {
        data: [
          [{
            yAxis: '0'
          }, {
            yAxis: '1000'
          }]
        ]
      }
    }]
  };
  chart2.setOption(option2);
  return chart2;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '村庄数据', //导航栏 中间的标题
      hidden: 1
    },
    height: app.globalData.height * 2 + 20, // 此页面 页面内容距最顶部的距离
    country: {},
    sample: {},
    project: [],
    partnerList: [],
    pages:1,
    locationId:0,
    ec: {
      onInit: initChart
    },
    ec2: {
      onInit: initChart2
    }
  },
  onProject(e){
    let id = e.currentTarget.dataset.item.id
    wx.navigateTo({
      url: '../project/project?id=' + id
    })
  },
  onSelectPartner(e) {
    let id = e.currentTarget.dataset.item.id
    wx.navigateTo({
      url: '../partner/partner?id=' + id
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // this.initChart()
    var that = this
    var ec = "ec.onInit",
      ec2 = "ec2.onInit"
    var that = this;
    that.setData({
      locationId: options.id
    });
    var data = {
      locationId: options.id,
    };
    var url = app.u.url + app.u.village.GetLocation;
    api.requestUrl(data, url).then(res => {
      that.setData({
        country: res.data.info,
        sample: res.data.sampleList[0]
      });
      param = that.data.sample.ph
      param2 = that.data.sample.tds
      that.setData({
        [ec]: initChart,
        [ec2]: initChart2
      })
    });
    this.onSelect();
    this.onSelectSponsor();
  },
  onSelect() {
    var that = this
    var data = {
      locationId: that.data.locationId,
      currentPage: that.data.pages
    }
    var url = app.u.url + app.u.village.NextProject
    api.requestUrl(data, url).then(res => {
      that.setData({
        project: res.data
      });
    })
  },
  onSelectSponsor() {
    var that = this
    var data = {
      locationId: that.data.locationId,
      currentPage: that.data.pages
    }
    var url = app.u.url + app.u.village.NextSponsor
    api.requestUrl(data, url).then(res => {
      that.setData({
        partnerList: res.data
      });
    })
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})